{foreach from=$menu item=menu_item} {$n=$n+1} {if $n<6} {if $menu_item.type == 'link_internal_textpage'}
  • {$menu_item.title}
  • {elseif $menu_item.type == 'submenu'}
  • {$menu_item.title}
      {foreach from=$menu_item.subitems item=submenu_item} {if $submenu_item.type == 'link_internal_textpage'}
    • {$submenu_item.title}
    • {/if} {/foreach}
  • {/if} {/if} {/foreach}

Cherry Responsive mit nPage Script Demo 1

Allgemeine Beschreibung

Diese Navigationsleiste verläuft horizontal zwischen einem Bannerbereich und dem Inhalt. Sie ist so aufgebaut, dass es zu jedem Hauptmenüpunkt einen oder mehrere Untermenüpunkte gibt. Die einzelnen Untermenüpunkte werden angezeigt, wenn den jeweiligen Hauptmenüpunkt hovert.

Das Menü ist so aufgebaut, dass sich bei einer geringeren Bildschirmauflösung die Form der Navigation ändert. Dadurch lasst sich diese Navigationleiste auch mit einem Smartphone gut bedienen.

Zusätzlich zur Ausgangsvariante der Navigation wurde beim :hover-Link eine kleine Grafik (ein Ferkelkopf) eingebaut.

Diese Navigationsleiste ist nur mit aktiviertem JavaScript voll funktionsfähig. Es ist eine höhere jQuery-Version erforderlich. Hier wird die in allen nPage-Seiten automatisch eingefügte jQuery-Version genutzt.

Diese Variante verwendet -anders als die Variante mit statischer Navigation- nPage Script, so dass die Navigation automatisch erstellt wird. Allerdings wird die Anzahl der Hauptmenüpunkte begrenzt, da die Navigationsleiste in bestimmten Fällen zu breit wäre. Hier besteht noch Nachbesserungsbedarf.

Durchzuführende /durchgeführte Test mit verschiedenen Browsern und Geräten

Desktop-Browser

  • Firefox 29- vollständig funktionsfähig
  • Google Chrome 35 - vollständig funktionsfähig
  • Internet Explorer 11 - vollständig funktionsfähig
  • Internet Explorer 10 - vollständig funktionsfähig
  • Internet Explorer 9 - vollständig funktionsfähig, keine transition-Übergänge
  • Internet Explorer 8 - funktionsfähig, keine transition-Übergänge, keine Anpassung an geringere Bildschirmbreite

Mobile Geräte und Emulationen

 

Zusammenfassung der Merkmale

Drop Down, Vertikal, Flyout, Horizontal, Tabbed, Responsive, jQuery, Accordion, nur CSS, CSS3, CSSMenumaker, CSSDeck